<template>
  <div class="mod_item" v-if="hotVideoList.length > 0">
    <div class="left">
      <div class="top">
        <span class="mod_title">{{ this.modItemInfo.name }}</span>
        <div class="mod_paging">
          <span
            @click="checkCurrentIndex(0)"
            :class="{
              paging_button_disabled: currentIndex === 1,
              left_paging_button: currentIndex !== 1,
              paging_button: true,
            }"
            ><i class="el-icon-arrow-left"></i
          ></span>
          <span class="page_num"
            >{{ this.currentIndex }}/{{ this.totalPage }}</span
          >
          <span
            @click="checkCurrentIndex(1)"
            :class="{
              paging_button_disabled: currentIndex === totalPage,
              left_paging_button: currentIndex !== totalPage,
              paging_button: true,
            }"
            ><i class="el-icon-arrow-right"></i
          ></span>
        </div>
      </div>
      <div class="video_list">
        <div
          v-for="(i, index) in showVideoList"
          :key="i.id"
          class="video_item"
          @click="routerHandle(item)"
          @mouseenter="mouseover($event, i, index)"
        >
          <div
            :style="{ 'background-image': 'url(' + i.coverImg + ')' }"
            class="video_coverImg"
          ></div>
          <div style="margin-top: 10px">
            <span style="font-weight: 600px">{{ i.name }}</span>
          </div>
        </div>
      </div>
      <div
        @mouseleave="mousemove()"
        class="hover"
        @click="link()"
        :key="'hover' + hoverVideo.id"
        :style="{
          top: this.hoverVideoTop,
          left: this.hoverVideoLeft,
        }"
        v-show="isShowHover"
      >
        <div v-if="isShowHover" style="width: 100%; height: 52%">
          <img style="width: 100%; height: 100%" :src="hoverVideo.coverImg" />
        </div>
        <div class="hover_content">
          <router-link to="/" class="title">{{
            this.hoverVideo.name
          }}</router-link>
          <div class="labels">
            <span
              class="label"
              v-for="item in this.hoverVideo.labelList"
              :key="item.id"
              >{{ item.name }}</span
            >
          </div>
          <div class="synopsis">
            <span style="color: #111">简介:</span>
            <span> {{ this.hoverVideo.synopsis }}</span>
          </div>
          <div class="link_button">
            <div class="slider_figure_btn" _stat="焦点图:大家在追:播放按钮">
              立即观看
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="top">
        <span class="mod_title">{{ this.modItemInfo.name }}排行榜</span>
      </div>
      <div class="mod_sort">
        <div
          @click="routerHandle(item)"
          class="rank_item"
          v-for="(item, index) in hotVideoList"
          :key="index"
        >
          <span
            :class="{
              rank_num: true,
              rank_num_color: index < 3 ? true : false,
            }"
            >{{ index + 1 }}</span
          >
          <span class="rank_name">{{ item.name }}</span>
          <span class="rank_title">{{ item.title }}</span>
          <span class="rank_play_count">{{ item.playCount }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getHotList } from "@/api/video";
export default {
  props: {
    modItemInfo: {
      required: true,
    },
  },
  created() {
    this.getHotVideoList();
  },
  watch: {
    currentIndex() {
      this.checkShowVideoList();
    },
  },
  data() {
    return {
      isShowHover: false,
      currentIndex: 1,
      totalPage: 3,
      pageSize: 8,
      hotVideoList: [],
      showVideoList: [],
      hoverVideo: {
        labelList: [],
      },
      hoverVideoTop: "0px",
      hoverVideoLeft: "0px",
    };
  },
  methods: {
    checkCurrentIndex(type) {
      if (type === 0) {
        if (this.currentIndex > 1) {
          this.currentIndex--;
        }
      } else {
        if (this.currentIndex < this.totalPage) {
          this.currentIndex++;
        }
      }
    },
    checkShowVideoList() {
      const list = [];
      const start = (this.currentIndex - 1) * this.pageSize;
      const end = this.currentIndex * this.pageSize;
      this.hotVideoList.forEach((item, index) => {
        if (start <= index && index < end) {
          list.push(item);
        }
      });
      this.showVideoList = list;
    },
    routerHandle(item) {
      this.$router.push("/play/" + item.id);
    },
    link() {
        this.$router.push("/play/" + this.hoverVideo.id);
    },
    getHotVideoList() {
      getHotList(this.modItemInfo.id).then((v) => {
        this.hotVideoList = v.data;
        const pageTotal = Math.ceil(this.hotVideoList.length / 8);
        if (pageTotal < this.totalPage) {
          this.totalPage = pageTotal;
        }
        this.checkShowVideoList();
      });
    },
    mouseover(e, i) {
      this.hoverVideoLeft = e.path[0].offsetLeft - 20 + "px";
      this.hoverVideoTop = e.path[0].offsetTop - 10 + "px";
      if (i.labels != null && i.labels != "" && i.labelList === undefined) {
        var labelList = [];
        var allLabels = this.$store.getters.Labels;
        i.labels.split(",").forEach((element) => {
          allLabels.forEach((item) => {
            if (item.parentId === 0) {
              item.children.forEach((item) => {
                if (item.id == element) {
                  labelList.push(item);
                }
              });
            } else {
              if (item.id == element) {
                labelList.push(item);
              }
            }
          });
        });
        i.labelList = labelList;
      }
      this.hoverVideo = i;
      this.isShowHover = true;
    },
    mousemove() {
      (this.hoverVideo = {
        labelList: [],
      }),
        (this.isShowHover = false);

      console.log(this.isShowHover, this.hoverVideo);
    },
  },
};
</script>

<style lang="scss" scoped>
@media (max-width: 1789px) {
  .mod_item {
    .left {
      width: 812px;
    }
    .right {
      width: 388px;
    }
  }
}
@media (max-width: 1549px) {
  .mod_item {
    .left {
      width: 812px;
    }
    .right {
      width: 388px;
    }
  }
}
@media (max-width: 1280px) {
  .mod_item {
    .left {
      width: 609px;
    }
    .right {
      width: 365px;
    }
  }
}

.mod_item {
  width: 100%;
  padding-bottom: 40px;
  float: left;
  .mod_title {
    font-size: 26px;
  }
  .left {
    float: left;
    // width: 70%;
    .top {
      width: 100%;
      margin-bottom: 30px;
      .mod_paging {
        float: right;
        margin-right: 18px;
        .page_num {
          display: inline-block;
          min-width: 20px;
          margin: 0 15px;
          color: #666;
          font-size: 14px;
          letter-spacing: 2px;
          line-height: 30px;
          text-align: center;
          vertical-align: top;
        }
        i {
          margin-top: 7px;
        }
        .left_paging_button:hover {
          background-color: #f8f8f8;
          color: #ff5c38;
        }
        .paging_button {
          display: inline-block;
          width: 30px;
          height: 30px;
          border-radius: 100%;
          color: #666;
          text-align: center;
          vertical-align: top;
        }
        .paging_button_disabled {
          color: #ccc;
        }
      }
    }
    .hover {
      width: 238px;
      height: 327px;
      position: absolute;
      border-radius: 4px;
      overflow: hidden;
      box-shadow: 0 28px 50px rgba(25, 24, 40, 0.35);
      z-index: 10;
      .hover_content {
        width: 100%;
        height: 50%;
        background: #fff;
        padding: 8px 12px 44px;
        .link_button {
          position: absolute;
          bottom: 7px;
          .slider_figure_btn {
            width: 80px;
            height: 32px;
            background: url("../../image/btn_view_sprite.svg") 0 0 no-repeat;
            color: #fff;
            font-size: 12px;
            line-height: 30px;
            text-align: center;
            cursor: pointer;
          }
        }
        .title {
          display: inline-block;
          max-width: 150px;
          overflow: hidden;
          color: #111;
          font-size: 15px;
          font-weight: 700;
          line-height: 24px;
          text-overflow: ellipsis;
          vertical-align: top;
          white-space: nowrap;
          text-decoration: none;
        }
        .synopsis {
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          word-wrap: break-word;
          display: -webkit-box;
          position: relative;
          width: 90%;
          max-height: 36px;
          margin-bottom: 8px;
          overflow: hidden;
          color: #666;
          font-size: 12px;
          line-height: 18px;
          text-overflow: ellipsis;
          white-space: normal;
          word-break: break-all;
        }
        .labels {
          position: relative;
          height: 20px;
          margin-bottom: 10px;
          padding-top: 10px;
          overflow: hidden;
          .label {
            display: inline-block;
            max-width: 90px;
            margin-right: 8px;
            padding: 0 8px;
            overflow: hidden;
            border-radius: 20px;
            background: #eee;
            color: #333;
            font-size: 12px;
            letter-spacing: normal;
            line-height: 20px;
            text-align: center;
            text-overflow: ellipsis;
            vertical-align: top;
            white-space: nowrap;
          }
        }
      }
    }
    .video_list {
      width: 100%;

      .video_item {
        width: 185px;
        height: 268px;
        margin-right: 18px;
        float: left;
        padding-bottom: 50px;
        .video_coverImg {
          border-radius: 4px;
          background-repeat: no-repeat;
          background-size: 100% 100%;
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .right {
    float: right;

    .top {
      margin-top: -4px;
      margin-bottom: 30px;
    }
    .mod_sort {
      background-color: #f8f8f8;
      .rank_item:first-child {
        border-top: none;
      }
      .rank_item {
        margin: 0 20px;
        padding: 20px 30px 18px 40px;
        border-top: 1px solid #eee;
        position: relative;
        cursor: pointer;
        .rank_title {
          color: #999;
          font-size: 13px;
          display: block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .rank_name {
          margin-right: 80px;
          color: #111;
          font-size: 18px;
          font-weight: 700;
          line-height: 24px;
          display: block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .rank_name:hover {
          color: #ff183e;
        }
        .rank_num {
          left: 4px;
        }
        .rank_num {
          font-size: 28px;
          position: absolute;
          left: 0px;
          margin-top: -4px;
          color: #666;
          font-size: 26px;
          line-height: 30px;
        }
        .rank_num_color {
          -webkit-text-fill-color: transparent;
          -webkit-background-clip: text;
          background-image: linear-gradient(
            180deg,
            #ffb821 0,
            #ff5c38 45%,
            #ff1459
          );
          color: #ff183e;
        }
      }
    }
  }
}
</style>
